<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="content">
			<view class="content-top">
				<view class='cell-group'>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>提现方式</view>
						</view>
						<view class='cell-item-bd'>
							<u-radio-group v-model="post_data.pay_type">
								<u-radio label="微信提现" :activeColor="$s.theme" :customStyle="{marginRight: '8px'}" :name="1"></u-radio>
								<u-radio label="银行卡提现" :activeColor="$s.theme" :customStyle="{marginRight: '8px'}" :name="2"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class='cell-item cell-item-mid' v-if="post_data.pay_type===2">
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>银行卡号</view>
						</view>
						<view class='cell-item-bd'>
							<input type="number" class='cell-bd-input' v-model="post_data.bankcard" focus @blur="checkCard()" placeholder='请输入银行卡号'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid' v-if="post_data.pay_type===2">
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>持卡人</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="post_data.realname" placeholder='请输入持卡人姓名'></input>
						</view>
					</view>
					
					<view class='cell-item cell-item-mid right-img' v-if="post_data.pay_type===2">
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>开户行</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="post_data.bankname" placeholder='请输入开户行信息'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid right-img'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>申请说明</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="post_data.content" placeholder='请输入申请说明'></input>
						</view>
					</view>
				</view>
				
				
				<!-- 提现金额手续费 提现金额input -->
				<view class='cell-group margin-cell-group'>
					<view class='cell-item'>
						<view class='cell-item-bd' v-if="tocashExplain">
							<view class='cell-hd-title' style="color: #666;">{{ tocashExplain || ''}}</view>
						</view>
					</view>
					<view class='cell-item'>
						<view class='cell-item-bd withdrawcash-input'>
							<text>￥</text><text class="input">{{money}}</text>
						</view>
					</view>
					<view class='cell-item'>
						<view class='cell-item-bd'>
							<view class='cell-hd-title' style="color: #666;" v-show="!isError">可用余额 {{ withdraw.can_withdraw_money || 0}} 元</view>
							<view class='cell-hd-title' style="color: #f00;" v-show="isError">提现金额超过可用余额</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="button-bottom">
				<button class="btn btn-square btn-b" hover-class="btn-hover2" v-if="isSubmit" @click="toCash" :disabled='submitStatus' :loading='submitStatus'>确认提现</button>
				<button class="btn btn-square btn-gray" hover-class="btn-hover2" v-else-if="!isSubmit" disabled>确认提现</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import $agent from '@/common/agent'
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data () {
			return {
				nav_title:"佣金提现",
				post_data:{
					pay_type:1,
					bankname:'',
					bankcard:'',
					realname:'',
					content:'',
				},
				isError: false, // 当提现金额大于可用余额 显示错误提示
				isSubmit: false, // 提现点击
				money: 0, // 用户输入的提现金额
				agent_conf:{},		//分销配置
				withdraw:{},		//提现佣金
				submitStatus: false
			}
		},
		onLoad () {
			this.initData()
		},
		onShow() {
		},
		computed: {
			...mapState({
				userInfo:state => state.$userInfo,
				config:state => state.$config,
				$s:state => state.$style,
			}),
			// 店铺提现手续费
			tocashMoneyRate () {
				return this.agent_conf.withdraw_fee
			},
			// 店铺提现最低金额
			tocashMoneyLow () {
				return this.agent_conf.min_withdraw
			},
			// 提现文字说明
			tocashExplain () {
				if (this.tocashMoneyRate && this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元（收取 ' + this.tocashMoneyRate + ' %服务费）'
				} else if (this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元'
				} else if (this.tocashMoneyRate) {
					return '收取 ' + this.tocashMoneyRate + ' %服务费'
				} else {
					return ''
				}
			}
		},
		methods: {
			async initData(){
				this.agent_conf = await $agent.getConf()
				this.withdraw = await $agent.withdrawCount()
				this.money = this.withdraw.can_withdraw_money || 0
			},
			// 去提现
			toCash () {
				if (Number(this.money) === 0){
					this.$c.error('提现金额不能为0')
					return false
				}
				
				if(this.post_data.pay_type===2){
					if (!this.post_data.bankcard) {
						this.$c.error('请输入银行卡号')
						return false
					} else if (!/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,30}$/.test(this.post_data.realname)) {
						this.$c.error('请输入正确的持卡人名称')
						return false
					} else if (!this.post_data.bankname) {
						this.$c.error('请输入开户银行信息')
						return false
					}
				}

				this.submitStatus = true;
				this.$u.api.withdrawApply(this.post_data).then(res=>{
					if(res.status){
						this.$c.success('提现成功','agent/index')
					}
				}).catch(e=>{
					this.submitStatus=false
				})
			},
		},
		watch: {
			money () {
				//比较用户的输入金额 如果大于可用金额
				if (this.money === '' || Number(this.money) <= 0) {
					this.isSubmit = false
				} else if (Number(this.money) > Number(this.withdraw.can_withdraw_money)) {
					this.isError = true
					this.isSubmit = false
				} else if (Number(this.money) < Number(this.tocashMoneyLow)) {
					this.isError = false
					this.isSubmit = false
				} else {
					this.isError = false
					this.isSubmit = true
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/jshop.scss';
	.user-head{
		height: 100upx;
	}
	.user-head-img{
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}
	.cell-hd-title{
		color: #333;
	}
	.cell-item{
		border: none;
	}
	.cell-item-bd{
		color: #666;
		font-size: 26upx;
	}
	.button-bottom .btn {
		width: 100%;
	}
	.yl-logo{
		width: 188upx;
		height: 54upx;
		float: left;
	}
	.withdrawcash-input{
		display: flex;
		align-items: center;
		font-size: 50upx;
		border-bottom: 2upx solid #e8e8e8;
		padding-bottom: 20upx;
		width: 95%;
		max-width: 95%;
	}
	.withdrawcash-input text{
		font-size: 40upx;
	}
	.withdrawcash-input .input{
		display: inline-block;
		min-width: 500upx;
		padding-left: 20upx;
	}
	.btn-gray{
		background-color: #F3F3F3;
	}
	
	/* #ifdef MP-ALIPAY */
	.cell-hd-title .input {
		font-size: 24px;
		height: 18px;
	}
	/* #endif */
</style>
